<template>
  <div>
    <div id="home">
      <div id="Enter" class="center">
        <span class="opacChange" @click="GoMain">{{ $author }}</span>
        <div>
          <HomeTag
            v-for="item in homeTagUrl"
            :key="item.key"
            :custom="item.custom"
            :content="item.content"
            :color="item.color"
          ></HomeTag>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import HomeTag from '../../components/HomeTag'
import HomeTagUrl from '../../assets/js/homeTag'
export default {
  components: { HomeTag },
  props: {},
  data() {
    return {
      homeTagUrl: HomeTagUrl
    }
  },
  methods: {
    GoMain() {
      this.$router.push({ name: 'main' })
    }
  },
  mounted() {},
  watch: {}
}
</script>
<style lang="scss">
#home {
  background-image: url('../../../public/images/欢迎界面.jpg');
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
* {
  margin: 0;
  padding: 0;
}
.opacChange {
  transition: 1s;
  opacity: $HomeTagOpac;
  &:hover {
    opacity: 1;
    cursor: pointer;
  }
}
// .opacChange:hover {
// }
/* body {
  background-image: url("../../../public/images/背景6.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
} */
#Enter {
  width: 600px;
  height: 500px;
  position: absolute;
  top: 35%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
  }
  > span {
    font-family: $baseFont;
    font-size: 70px;
    color: azure;
  }
}
</style>
